<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
<style>
	.viewImages{height: 400px;overflow: scroll;}
		#imagesul li {position: relative;}
	#imagesul li img{width: 100%;height:120px;}
	.btndelete{position: absolute;top:0px;right:0px}
	.filesize{position: absolute;top:40px;right:0px;font-size: 12px;}
</style>
	</head>
	<body>	
	<h6><kbd>&nbsp;上传图片到【{$photosort.name}】&nbsp;</kbd></h6>
	<div hidden id="errsumaary" class="alert alert-warning"></div>
	<div class="alert alert-info">
			<label for="">选择相册</label>
			<button class="btn btn-primary btn-sm">添加图片</button>
		     <input name="file" type="file" multiple="multiple" id="file" class="transFile" />
			<br /><br />
			<div class="alert alert-success viewImages">
				<ul class="list-unstyled " id="imagesul">
				
				</ul>
			</div>
			<button onclick="AJaxUpload()" class="btn btn-danger">批量上传</button>
			<a href="{:U('Photos/index')}" class="btn btn-danger">返回上一层</a>
	</div>
	</body>		
	<script>
	   var files=[];
	
	   var url="{:U('Photos/uploadHandle')}?photosort_id={$photosort.id}";
		$('#file').change(function(e)
		{
			var  fs=$(this).prop('files');
			for(i=0;i<fs.length;i++)
			{
				 if(fs[i].type.indexOf("image")!=-1){
					obj=new Object();
					obj.file=fs[i];
					files.push(obj);
					var fr=new FileReader();
					fr.readAsDataURL(fs[i]);
					fr.onloadend=function(e)
					{
						obj.id=parseInt(Math.random() * 9000000);
						obj.name=this.result;
						view(obj);
					} 
				 }else{
				 	$("#errsumaary").slideToggle();
				 	$("#errsumaary").text(fs[i].name+'，不是图片类型，别逗我。');
				 }
			}
			

			
		})
						/**
			 * 创建预览图
			 */
			function view(obj)
			{	
				var html = '<li class="col-lg-3 "><img class="thumbnail" src="'+obj.name+'"><span id="'+obj.id+'" onclick="deleteIMG('+obj.id+',this)" class="btn btn-danger btn-xs btndelete">删除</span><kbd class="filesize">'+parseInt(obj.file.size/1024)+'KB</kbd></li>';
				$(html).appendTo("#imagesul");
			}
			
				/**
			 * 删除
			 */
			function deleteIMG(id,sender)
			{				
				
				var index=-1;
				for(var i=0;i<files.length;i++)
				{
					if(files[i].id==id)
					{
						index=i;
  						break;
					}
				}
				if(index!=-1)
				{
					files.splice(index, 1);
					
					$(sender).parents('li').remove();
				}
			}
			/**
			 * 上传
			 */
			function AJaxUpload()
			{
				if(files.length>0)
				{
					for(j=0;j<files.length;j++)
					{
						upload(files[j]);
					}
				}else{
					alert('没有你要上传的图片！');
				}
				
			
			}
			/**\
			 * 上传
			 */
			function upload(obj)
			{ 
				var formdata = new FormData();
				formdata.append("fileList", obj.file);	         		
				var xhr = new XMLHttpRequest();
			
				xhr.open("POST",url, true);
				xhr.setRequestHeader("X_FILENAME", obj.file.name);
				xhr.onreadystatechange=function()
				{
					if(xhr.readyState==4&&xhr.status==200)
					{
						
						$('#'+obj.id).addClass("btn-success");
						$('#'+obj.id).text(xhr.responseText=="1"?'上传完成':"上传失败");		
						if(xhr.responseText!="1")
						{
							alert(xhr.responseText);
							return;
						}
						for(var i=0;i<files.length;i++)
								{
									if(files[i].id==obj.id)
									{
										files.splice(i, 1);
				  						break;
									}
								}
									
						
					}
				}
				xhr.send(formdata);
				
			}
	</script>
</html>
